import Taro, { Component } from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import './pupular.scss';
import AppConfig from "../../config/appConfig";
import {TenThousandToStr} from "../../utils/utils";
import {GetSimilar} from "../../mode/similarCtr";
import {GetSwiper} from "../../mode/swiperCtr";
import appStore from "../../store/appStore";
class Popular extends Component{

  config = {

  }

  state={
    similarItems:[]
  }

  componentWillMount () {
    this.onGetMoreSimilar(this.props.item)
  }

  onGetMoreSimilar=(item)=>{

    GetSimilar(item).then((similars)=>{

      var data = similars.data.concat(this.state.similarItems)
      this.setState({
        similarItems:data
      })
    })
  }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onClickItem=(item)=>{
    console.log('点击')
    // Taro.navigateTo({
    //   url: `/pages/detailPage/detailPage?item=${encodeURIComponent(JSON.stringify(item))}`
    //   // `/pages/cate-sub/cate-sub?subId=${item.id}&categoryId=${item.superCategoryId}`
    // })
  }

  render () {
    var dataList = this.state.similarItems
    return (
      <View>
        <View className={'contain_view'}>
          <View className='contain_list'>
            {dataList.map((item,index) => {
              return (
                <View
                  key={index}
                  className='contain_list-item'
                  onClick={()=>{

                    GetSwiper(item).then(res=>{
                      Taro.navigateTo({
                        url: `/pages/detailPage/detailPage?item=${encodeURIComponent(JSON.stringify(res))}`
                        // `/pages/cate-sub/cate-sub?subId=${item.id}&categoryId=${item.superCategoryId}`
                      })
                    })
                  }}
                >
                  {/*图片*/}
                  <Image className='contain_list-item-img' src={item.Pic} />
                  <View className={'contain_list-item-backgroundItem'}>
                    {/*描述*/}
                    <Text className={'contain_list-item-title'} style={{
                      display: '-webkit-box',
                      overflow: 'hidden',
                      '-webkit-line-clamp': 2,
                      '-webkit-box-orient': 'vertical',
                      color: '#121212',
                      textOverflow:"ellipsis",
                      width: "100%",
                      wordBreak:"break-word"
                    }}>
                      {/*<Text className={'contain_list-item-title-typeFrom'}>*/}
                        {/*{*/}
                          {/*AppConfig.GetTypeStr(item.TypeFrom)*/}
                        {/*}*/}
                      {/*</Text>*/}
                      {item.ShortTitle === '' ? item.Title :item.ShortTitle}
                    </Text>
                    <View className={'contain_list-item-center'}>
                      <Text className={'contain_list-item-center-truePrice'}>
                        原价:￥{item.Price}
                      </Text>
                      <Text className={'contain_list-item-center-num'}>
                        月销:{TenThousandToStr(item.SaleCount)}
                      </Text>
                    </View>
                    <View className={'contain_list-item-center'}>
                      <Text className={'contain_list-item-center-redNum'}>
                        {
                          appStore.appConfig.open >= 1 ? '卷后:￥':''
                        } {item.EndPrice}
                      </Text>
                      {
                        appStore.appConfig.open >= 1 ?( <Text className={'contain_list-item-center-redJuan'}>
                          卷:￥{item.CouponMoney}
                        </Text>):(<View/>)
                      }

                    </View>
                  </View>
                </View>
              )
            })}
          </View>
        </View>
      </View>
    )
  }

}

export default  Popular;
